<div class="w-full flex justify-center">
  <p-stepper [value]="1">
    <p-step-list>
      <p-step [value]="1">Library Details</p-step>
      <p-step [value]="2">Select Directories</p-step>
    </p-step-list>

    <p-step-panels>

      <p-step-panel [value]="1">
        <ng-template #content let-activateCallback="activateCallback">
          <div class="flex flex-col justify-between w-full md:w-[45rem] max-w-[50rem] mx-auto">

            <div class="flex-grow flex items-center justify-center">
              <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-10 border border-[var(--border-color)] p-6 rounded-xl w-full">

                <label class="self-center">Library Name</label>
                <input
                  pInputText
                  class="w-full"
                  [(ngModel)]="chosenLibraryName"
                  placeholder="Enter library name..."/>

                <label class="self-center">Library Icon</label>
                @if (!selectedIcon) {
                  <p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"/>
                } @else {
                  <div class="flex items-center gap-2">
                    <i [class]="selectedIcon" class="text-3xl"></i>
                    <p-button
                      icon="pi pi-times"
                      (onClick)="clearSelectedIcon()"
                      [rounded]="true"
                      [text]="true"
                      [outlined]="true"
                      severity="danger"/>
                  </div>
                }

                <label class="self-center">Import Mode</label>
                <div class="flex items-center gap-2">
                  <p-select
                    [(ngModel)]="scanMode"
                    [options]="scanModeOptions"
                    optionLabel="label"
                    optionValue="value"
                    placeholder="Choose how to scan books"
                    class="w-full"/>
                  <i
                    class="pi pi-info-circle text-sky-600 cursor-pointer"
                    pTooltip="Select how BookLore interprets your files during import:
                              • File as Book: Each file becomes a separate book.
                              • Folder as Book: Each folder is imported as a single book, including multiple formats or extra files.
                                If you are unsure, choose 'File as Book'."
                    tooltipPosition="right"></i>
                </div>

                @if (scanMode == 'FOLDER_AS_BOOK') {
                  <label class="self-center">Preferred Format</label>
                  <div class="flex items-center gap-2">
                    <p-select
                      [(ngModel)]="defaultBookFormat"
                      [options]="bookFormatOptions"
                      optionLabel="label"
                      optionValue="value"
                      placeholder="Select preferred format"
                      class="w-full"
                      appendTo="body"/>
                    <i
                      class="pi pi-info-circle text-sky-600 cursor-pointer"
                      pTooltip="If a folder contains books in multiple formats, this setting determines which format BookLore will use as the primary file."
                      tooltipPosition="right"></i>
                  </div>
                }

                <label class="self-center">Monitor Folders</label>
                <div class="flex items-center gap-2">
                  <p-toggleswitch [(ngModel)]="watch"/>
                  <i
                    class="pi pi-info-circle text-sky-600 cursor-pointer"
                    pTooltip="Watches for file changes and auto-adds/removes books."
                    tooltipPosition="right"></i>
                </div>
              </div>
            </div>

            <div class="flex justify-end pt-6">
              <p-button
                label="Next"
                icon="pi pi-arrow-right"
                iconPos="right"
                (onClick)="validateLibraryNameAndProceed(activateCallback)"
                [disabled]="!isLibraryDetailsValid()"/>
            </div>
          </div>
        </ng-template>
      </p-step-panel>

      <p-step-panel [value]="2">
        <ng-template #content let-activateCallback="activateCallback">
          <div class="flex flex-col justify-between w-[24rem] md:w-[45rem] max-w-[50rem] mx-auto">

            <div class="flex-grow flex items-center justify-center">
              <div class="flex flex-col gap-6 border border-[var(--border-color)] px-2 py-4 md:p-6 rounded-xl w-full">

                <div class="flex justify-center">
                  <p-button
                    label="Add Book Folders"
                    icon="pi pi-folder-open"
                    [outlined]="true"
                    severity="info"
                    (onClick)="openDirectoryPicker()"/>
                </div>

                <div class="flex flex-col gap-2 max-h-70 overflow-y-auto">
                  @for (folder of folders; track folder) {
                    <div class="flex items-start justify-between p-1 gap-4">
                      <div class="flex items-center gap-4 overflow-x-auto whitespace-nowrap flex-1 pr-2" [pTooltip]="folder" tooltipPosition="top">
                        <i class="pi pi-folder text-yellow-600 text-sm"></i>
                        <span class="truncate">{{ folder }}</span>
                      </div>

                      <div class="flex-shrink-0">
                        <p-button
                          icon="pi pi-times"
                          [rounded]="true"
                          outlined
                          size="small"
                          severity="danger"
                          (onClick)="removeFolder(folders.indexOf(folder))"/>
                      </div>
                    </div>
                  }
                </div>

              </div>
            </div>

            <div class="flex justify-between pt-6">
              <p-button label="Back" icon="pi pi-arrow-left" iconPos="left" (onClick)="activateCallback(1)"/>
              <p-button label="Save" icon="pi pi-save" severity="success" [disabled]="!isDirectorySelectionValid()" (onClick)="createOrUpdateLibrary()"/>
            </div>
          </div>
        </ng-template>
      </p-step-panel>

    </p-step-panels>
  </p-stepper>
</div>
